<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
	<a href="javascript:void(0);" onclick="$('#win_order').dialog('close')" class="window-close"></a>
<!-- 	<div class="tc"> -->
		<div class="tc_top fl"><h2>发送预约</h2></div>
		<div class="tc_add fl">
	    	<h2 class="font_s">需要寄养的宠物狗</h2>
	        <div class="add_new" id="win_order_pet_list">
	        </div>
	        <div class="newadd" id="order_pet_add" style="display: none;">
	        	<div class="L">
	                <p>
	                    名字<input class="easyui-validatebox tc-name" name="pet.petName" data-options="required:true, prompt:'请填写宠物名称。'" type="text" />
	                    &nbsp;&nbsp;性别
	                    <select class="easyui-combobox" name="pet.petSex" data-options="panelHeight:null" style="width:103px; height:32px;">
	                        <option value="1" selected="selected">男孩</option>
			    			<option value="2">女孩</option>
	                    </select>
	                </p>
	                <p class="mt6">
	                	品种<input class="tc-class" name="pet.petType" type="text" />
	                	&nbsp;&nbsp;体型
	                    <select name="pet.petSomatotype" class="easyui-combobox" data-options="panelHeight:null" style="width:190px; height:32px;">  
						    <option>微型犬</option>
						    <option>小型犬</option>
						    <option>中型犬</option>
						    <option>大型犬</option>
						    <option>巨型犬</option>
						</select>
	                </p>
	            </div>
	            <div class="R">
	            	<a href="javascript:tendog.win.orderAction.savePet();">添加</a>
	            </div>
	            <div class="clear"></div>
	            <span class="closeAdd" onclick="$('#order_pet_add').hide();"></span>
	        </div>
	        <form id="win_order_form" method="post" action="${ctx}/order/create.do">
	        <input type="hidden" name="order.hostId" value="${param['id']}"/>
	        <div class="tc-time">
	            <h2 class="font_s">预约日期</h2>
	            <div class="tc-date">
	            	从
	                <input name="order.orderStartDate" type="text" class="easyui-datebox" data-options="pWidth:7,required:true"/> 
	                到
	                <input name="order.orderEndDate" type="text" class="easyui-datebox" data-options="pWidth:7,required:true"/> 
	            </div>
	        </div>
	        <div class="tc-said">
	        	<h2 class="font_s">留言</h2>
	            <textarea name="order.userRemark">您可以在这里填写问题以及特殊要求等</textarea>
	        </div>
	        <p class="tc-rule"><label><input id="iagree" type="checkbox" checked="checked" />我同意</label><a href="#">《宠物寄养服务条款》</a></p>
	        <p class="tc-send"><a id="win_order_submit" class="easyui-linkbutton tg-btn" href="javascript:void(0);" onclick="tendog.win.orderAction.submitOrder(this)">确认发送</a></p>
	        </form>
	    </div>
<!-- 	</div> -->
<script type="text/javascript">
$("#iagree").click(function(){
	if($(this).is(":checked")){
		$("#win_order_submit").linkbutton("enable");
	} else {
		$("#win_order_submit").linkbutton("disable");
	}
});

tendog.win.orderAction = {
	showPetList:function() {
		$.getJSON("${ctx}/pet/list.do", function(petList) {
			var $listUl = $("#win_order_pet_list");
			$listUl.empty();
			$.each(petList, function(i, pet){
				var $li = $("<label></label>").addClass("add_dog")
				//.click(function(event){
					//event.stopPropagation();
					//$(this).find(":checkbox").click();
				//});
				var imgSrc = "${ctx}/images/pet_no_head.jpg";
				if(pet.petPhotoPath) {
					imgSrc = "${ctx}/tools/download.do?dir=PET&fileName=" + pet.petPhotoPath;
				}
				var $headImg = $("<img/>").attr({width:'110px',height:'110px'}).error(function(){
					this.src="${ctx}/images/pet_no_head.jpg";
				}).attr("src", imgSrc);
				$li.append($("<div class='dog_img'></div>").append($headImg));
				var $petInfo = $("<p></p>").append("<input type='checkbox' name='petids' value='" + pet.id + "' />")
								.append("<span>" + pet.petName + "</span>")
								.append("<br />&nbsp;&nbsp;&nbsp;")
								.append(pet.petSomatotype);
				$li.append($petInfo);
				$listUl.append($li);
			});
			
			var $li = $("<div></div>").addClass("add_dog").click(function(event){
				tendog.win.orderAction.showAddPet();
			});
			var $petImgBox = $("<div class='dog_img'><img src='${ctx}/images/pet_img2.png'/></div>");
			$li.append($petImgBox);
	        $listUl.append($li);
			$listUl.append("<div class='clear'></div>");
		});
	},
	showAddPet:function(){
		$("#order_pet_add input[name^='pet']:visible").val("");
		$("#order_pet_add [comboname^='pet']").combobox("reset");
		$("#order_pet_add").show();
	},
	savePet:function() {
		var pet = {
					"pet.petName":$("input[name='pet.petName']").val(),
					"pet.petSex":$("[comboname='pet.petSex']").combobox("getValue"),
					"pet.petType":$("[name='pet.petType']").val(),
					"pet.petSomatotype":$("[comboname='pet.petSomatotype']").combobox("getValue")
				};
		$.post('${ctx}/pet/save.do', pet, function(res) {
			tendog.win.orderAction.showPetList();
			$("#order_pet_add").hide();
		},"json");
	},
	submitOrder:function(buttonObj) {
		frame.submitForm("win_order_form", buttonObj, function(res) {
	        if (res.code == 1) {
	        	msg.msg("预约发送成功.");
	        	$('#win_order').dialog('close');
	        } else {
	        	tools.err(res.msg);
	        }
	    }, function(param){
	    	var $petids = $("#win_order_pet_list [name='petids']:checked");
	    	if($petids.length == 0) {
	    		msg.warning("没有选择宠物！");
	    		return false;
	    	}
	    	$petids.each(function(i, petInput){
	    		param["order.petList["+i+"].petId"] = $(petInput).val();
	    	});
	    });
	}
};

tendog.win.orderAction.showPetList();
</script>
</body>
</html>